<template>
	<view class="product-list-container" >
		<view class="top-bar" :style="{top:topHeight+'px'}">
			<view class="top-bar-item" @tap="changeIndex(index)" v-for="(item,index) in topBarList" :key="index">
				<view :class="index==current?'name red':'name'">
					{{item.nameL}}
				</view>
				<view  class="arrows" v-if="index==1 || index==2">
			
					<i :class="['iconfont', 'icon-arrow-up', 'up',item.status=='up'?'active':''] "  ></i>
					<i :class="['iconfont', 'icon-arrow-down', 'down',item.status=='down'?'active':''] "></i>
				</view>
			</view>
		</view>
		<view class="product-list">
			<view  @tap="goToProductDetail(item.id)" class="product-list-item" v-for=" item in productList" :key="item.id">
				<image class="product-list-item-img" :src="item.pic"></image>
				<view class="product-list-item-title">{{item.name}}</view>
				<view class="product-list-item-desc">
					<view class="product-list-item-desc-price">{{item.price}}</view>
					<view class="product-list-item-desc-belong">{{item.productCategoryName}}</view>
				</view>
			</view>
		</view>
		<view v-if="isShow" class="no-more">没有更多数据了...</view>
	</view>
</template>

<script>
	import {findProductList as findProductListApi} from '@/api/kind/index.js'
	export default {
		name:'ProductList',
		data() {
			return {
				topHeight:0,
				productList:[],//商品列表
				start:1,//获取第几页的数据
				limit:6,//一页几条数据
				isDesc:0,//0升序,1降序,默认为升序0
				sortBy:"",//依照什么排序,sale销量,price价格排序
				categoryId:'',//分类id
				status:'default',//default,up,down
				current:0,//当前选中的topBar索引
				topBarList:[
					{
						nameL:'新品'
					},
					{
						nameL:'销量',
						status:'default',//
					},
					{
						nameL:'价格',
						status:'default',
					},
					{
						nameL:'筛选'
					},
				],//头部导航栏数据
				total:0,//一共多少条数据
				isShow:false//控制没有更多数据元素的显示与隐藏
			}
		},
		onLoad(configs){
			var res=uni.getSystemInfoSync();
			this.topHeight=res.windowTop;
			this.categoryId=configs.id;
			this.getProductList();
		},
		//下拉刷钩子函数
		onPullDownRefresh(){
			this.resetStartAndList();
			this.getProductList();
			this.isShow=false;
		},
		//触底反弹钩子函数
		onReachBottom(){
			if(this.productList.length<this.total){
				this.start++;
				this.getProductList();
			}else{
				this.isShow=true;
			}
		},
		methods: {
			//跳转到商品详情页面
			goToProductDetail(id){
				uni.navigateTo({
					url:`../../productDetail/productDetail?id=${id}`
				})
			},
			//重置start和商品列表
			resetStartAndList(){
				this.start=1;
				this.productList=[];
			},
			//改变topBar索引值
			changeIndex(idx){
				this.resetStartAndList();
				this.current=idx;
				this.topBarList.forEach((ele,index)=>{
					if(index!=idx){
						ele.status='default';
					}
				})
				if(idx==1 ||idx==2){
					var item=this.topBarList[idx];
					if(item.status=='default'||item.status=='down'){
						item.status='up';
						this.isDesc=1;
					}else{
						item.status='down';
						this.isDesc=0;
					}
					if(idx==1){
						this.sortBy="sale";
					}else{
						this.sortBy="price";
					}
				}else{
					this.sortBy="sort";
				}
				this.getProductList()
				console.log(this.isDesc);
			},
			//获取商品列表
			getProductList(){
				findProductListApi(this.start,this.limit,{
					categoryId:this.categoryId,
					isDesc: this.isDesc,
					sortBy: this.sortBy
				})
				.then(res=>{
					
					this.productList.push(...res.data.rows)
					this.total=res.data.total;
					
					uni.stopPullDownRefresh();
					uni.pageScrollTo({
					      scrollTop: 0,
					  	  duration: 0
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-more{
		text-align: center;
	}
	.name{
		display: inline-block;
	}
	.red{
		color:red;
	}
	.product-list-container{
		height: 100vh;
		background-color: #eee8e2;
		.top-bar{
			position: fixed;
			left: 0rpx;
			right: 0;
			z-index: 10;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			width: 100%;
			height: 120rpx;
			background-color: #253c35;
			color:#fff;
			margin-bottom: 120rpx;
			.top-bar-item{
				height: 120rpx;
				line-height: 120rpx;
			}
			.arrows{
				display: inline-block;
				height: 120rpx;
				margin-left: 5rpx;
				line-height: 24rpx;
				vertical-align: -6rpx;
				.up,.down{
					display: block;
				}
				.up{
					margin-top: 8rpx;
				}
				.down{
					margin-top: -2rpx;
				}
				.active{
					color:red;
				}
			}
		}
		.product-list{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			width: calc(100% - 60rpx);
			margin:60rpx auto 0;
			padding-top: 100rpx;
			&-item{
				width: 48%;
				height: 400rpx;
				background-color: #FFFFFF;
				margin-bottom: 60rpx;
				&-img{
					display: block;
					width: 100%;
					height: 250rpx;
					margin-bottom: 50rpx;
					
				}
				&-title{
					box-sizing: border-box;
					padding-left:30rpx;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					font-weight: 700;
					
				}
				&-desc{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: calc(100% - 60rpx);
					margin:10rpx auto;
					
				}
			}
		}
	}

</style>
